<template>
    <div class="pickerBottom"  @click="_isHidden">
      <div class="pickerBottom-wrapper">
        <ul class="items-wrapper" @click.stop>
          <li class="item" v-for="(item,index) in valueItems" ref="item" @click="_isChecked(index,item.id)">{{item.name}}</li>
        </ul>
        <div class="btn-wrapper">
          <button class="btn">取 消</button>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "pickerBottom",
        props:{
          items:{
            type:Object/Array,
            default:function () {
              return [
                {name:'item1',id:0},
                {name:'item2',id:1},
                {name:'item3',id:2},
                {name:'item4',id:3},
                {name:'item5',id:4},
                {name:'item6',id:5},
                {name:'item7',id:6}
              ]
            }
          },
          show:{
            type:Boolean,
            default:false
          }
        },
        data(){
          return{
            valueItems:[],
            isShow:true,
            isActive:[],
            isActiveId:''
          }
        },
        methods:{
          _isHidden(){
            this.$emit('isActiveId',this.isActiveId)
          },
          _isChecked(index,id){
            for(let i = 0;i<this.$refs['item'].length;i++){
              i===index?this.$refs['item'][i].classList.add('isActive'):this.$refs['item'][i].classList.remove('isActive')
            }
            this.isActiveId = id
          },
        },
        computed:{

        },
        created() {
          this.valueItems = this.items
        },
        mounted() {
          this.isShow = this.show
          this.$refs['item'][0].classList.add('isActive')
          this.isActiveId = this.items[0].id
        }
    }
</script>

<style scoped lang="stylus">
  .pickerBottom
    background rgba(20,20,20,0.7)
    position absolute
    bottom 0
    right 0
    width 100%
    height 100%
    z-index 100
    .pickerBottom-wrapper
      position absolute
      bottom 0
      width 100%
      height 246px
      background #ffffff
      .items-wrapper
        height 202px
        overflow auto
        .item
          height 44px
          line-height 44px
          border-bottom 1px solid #ebebeb
          color #919191
          &.isActive
            background #dbecff
          &:active
            background #dbecff
          &:last-child
            border-bottom none
      .btn-wrapper
        font-size 0
        height 44px
        background #93D1FF
        .btn
          height 100%
          width 100%
          border none
          outline none
          font-size 14px
          color #ffffff
          background #49A2FE
</style>
